import React, { Component } from 'react'
import { Button, Divider } from 'antd'
import './AsideFilter.less'
import ButtonList from './component/ButtonList'
import DatePicker from './component/DatePicker'

class AsideFilter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            filterValue: {}
        }
    }

    render () {
        return <div className='aside-filter' >
            <h3 style={{ lineHeight: '100%' }}>筛选</h3>
            {(() => {
                const rowList = []
                const { filterConfig } = this.props
                if (filterConfig instanceof Array) {
                    filterConfig.forEach((config, index) => {
                        switch (config.type) {
                            case 'Selector': {
                                rowList.push(
                                    <div key={index}>
                                        <Divider />
                                        <ButtonList
                                            type={config.type}
                                            label={config.label}
                                            options={config.options}
                                            onChange={(values) => {
                                                const nextFilterValue = JSON.parse(JSON.stringify(this.state.filterValue))
                                                nextFilterValue[config.key] = values
                                                this.setState({
                                                    filterValue: nextFilterValue
                                                })
                                            }} />
                                    </div>
                                )
                                break
                            }
                            case 'Selectors': {
                                rowList.push(
                                    <div key={index}>
                                        <Divider />
                                        <ButtonList
                                            type={config.type}
                                            label={config.label}
                                            options={config.options}
                                            onChange={(values) => {
                                                const nextFilterValue = JSON.parse(JSON.stringify(this.state.filterValue))
                                                nextFilterValue[config.key] = values
                                                this.setState({
                                                    filterValue: nextFilterValue
                                                })
                                            }} />
                                    </div>
                                )
                                break
                            }
                            case 'RangePicker': {
                                rowList.push(
                                    <div key={index}>
                                        <Divider />
                                        <DatePicker onChange={(date) => {
                                            const nextFilterValue = JSON.parse(JSON.stringify(this.state.filterValue))
                                            nextFilterValue[config.key] = {
                                                ...date
                                            }
                                            this.setState({
                                                filterValue: nextFilterValue
                                            })
                                        }} />
                                    </div>
                                )
                                break
                            }
                            default:break
                        }
                    })
                }
                return rowList
            })()}

            <Divider />
            <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                <Button onClick={() => {
                    this.props.onFilter(this.state.filterValue)
                }} >确定</Button>
            </div>

        </div>
    }
}
export default AsideFilter